<template>
  <dt-modal-info ref='info' :title='title' :width='800'>
    <div class="info" v-for="(info, index) in infos" :key="index">
      <p>{{ index + 1 }}、{{ info.title }}</p>
      <div v-if="info.content && info.content.length">
        <p class="content" v-for="(cont, ind) in info.content" :key="'content-index-' + ind">
          {{ cont }}
        </p>
      </div>
      <div class="images" v-if="info.images && info.images.length">
        <p v-for="(img, i) in info.images" :key="'image-index-' + i">
          <img :src="img" :style="info.images.length == 1 ? 'width: 50%;' : 'width: 100%;'">
        </p>
      </div>
    </div>
  </dt-modal-info>
</template>

<script>
  import explain_1 from '../opt/explain_1.png'
  import explain_3 from '../opt/explain_3.png'
  import explain_4_1 from '../opt/explain_4_1.png'
  import explain_4_2 from '../opt/explain_4_2.png'
  import explain_4_3 from '../opt/explain_4_3.png'
  
  export default {
    data() {
      return {
        title: '佣金规则说明',
        infos: [
          {
            title: '房源根据所选产品与生效方式的有效期匹配佣金规则',
            images: [explain_1]
          },
          {
            title: '若同时存在多个有效佣金规则，则按最新的规则进行计算',
          },
          {
            title: '若每个订单的代理费相同（如车位等），可在基础代理费中选择“固定金额”',
            images: [explain_3]
          },
          {
            title: '3种结佣方式说明：',
            content: [
              '“全款”：订单状态为“签约已全款”后才可进行结佣，标准结佣时结算总销按100%计算，代理费根据“交房保证金比例”进行扣除',
              '“分阶段”：订单状态为“签约”后即可进行首次标准佣金结算，结算总销按所填“签约比例”计算，若房源已全款，则结算总销按100%计算，代理费根据“交房保证金比例”进行扣除',
              '“到账比”：根据回款金额进行标准佣金结算，结算总销=回款金额/签约总价，代理费根据“交房保证金比例”进行扣除'
            ],
            images: [explain_4_1, explain_4_2, explain_4_3]
          }
        ]
      }
    },
    mounted() {
    },
    methods: {
      show() {
        this.$refs.info.show()
      },
      hide() {
        this.$refs.info.hide()
      },
    }
  }
</script>

<style lang="scss" scoped>
  .info {
    margin-bottom: 10px;
  }
  
  .content {
    text-indent: 20px;
    line-height: 26px;
  }
  
  .images {
    display: flex;
  }
</style>
